{% extends "templates/web.html" %}

{% block style %}
<style>
	.navbar {
		display: none;
	}
	.web-footer {
		display: none;
	}
	body {
		font-family: Arial, sans-serif;
		background: url('/images/login_bj.jpg') center/cover;
		text-align: center;
	}
	#login-content {
		width: 400px;
		height: 500px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #f0f0f0;
		opacity: 0.9;
		transition: opacity 0.3s;
	}
	#login-content-supplier {
		width: 400px;
		height: 500px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #f0f0f0;
		opacity: 0.9;
		transition: opacity 0.3s; 
	}
	#qr_code_image {
		width: 400px;
		height: 400px;
		margin: 0 auto;
	}
	footer {
		position: absolute;
		bottom: 0;
		width: 70%;
		height: 50px;
		padding: 1px;
		text-align: center;
	}
	.btn {
		display: inline-block;
		border: none;
		border-radius: 4px;
		background-color: #f2f2e8;
		color: rgb(45, 23, 23);
		text-align: center;
		text-decoration: none;
		font-size: 12px;
		cursor: pointer;
	}
	.btn:hover {
		background-color: #c8dde4;
	}
	.osc-tabs__item {
        display: inline-block;
        cursor: pointer;
        margin-right: 0px;
        text-decoration: none;
    }

    .active {
        font-weight: bold;
    }

    .osc-tabs {
        display: flex;
        justify-content: center;
        max-width: 250px;
        margin: 0 auto;
    }
	body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
	form {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		text-align: center;
	}
	label {
		display: block;
		margin-bottom: 6px;
	}

	input[type="text"],
	input[type="password"],
	input[type="submit"] {
		width: 100%;
		padding: 10px;
		margin: 8px 0;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}
	input[type="submit"] {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
	}
	input[type="submit"]:hover {
		background-color: #45a049;
	}
	.error-message {
		color: red;
		margin-top: 5px;
	}
	.app-logo {
		width: 100px;
		height: 50px;
	}
</style>
{% endblock %}


{% block head_include %}
	{{ include_style('login.bundle.css') }}
{% endblock %}

{% macro logo_section() %}
<div class="page-card-head">
	<img class="app-logo" src="\images\login_logo.svg">
	<div class="osc-tabs">
		<div class="osc-tabs__item" data-osc-tab="supplier_login" onclick="switchTab('supplier_login')">登录系统</div>
        <div style="flex: 1;"></div>
		<div class="osc-tabs__item active" data-osc-tab="sms" onclick="switchTab('sms')">扫码登录</div>
    </div>
</div>
{% endmacro %}

{% block page_content %}
<div>
	<section class='for-login'>
		<div class="login-content page-card" id="login-content-supplier">
			{{ logo_section() }} 
			<form id="loginForm" action="/login" method="post">
				<input type="text" id="username" name="username" placeholder="姓名/邮箱" required><br>
				<div style="position: relative;">
					<input type="password" id="password" name="password" placeholder="密码" >
					<a href="#" id="showPasswordLink" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);">显示</a>
				</div><br>
				<input type="submit" value="登陆">
				<div class="error-message" style="display: none;">登录失败，请确认是否输入正确的用户名和密码</div>
			</form>
		</div>
		<div class="login-content page-card" id="login-content" style="display: none;">
			{{ logo_section() }}
			<img id="qr_code_image" src="\images\default_QR_code_backdrop.jpg" style="height: 230px; width: 230px;" alt="登录二维码">
			<br/><br/>
			<button class="btn" id="btn_qr_code">获取最新二维码</button>
		</div>

	</section>
</div>
{% endblock %}

{% block script %}
<script>
	var intervalId; 
	var qr_code_id = ''
	var qr_code_image = ''
	var image = document.getElementById("qr_code_image");

	function switchTab(tab) {
		const smsTab = document.querySelector('[data-osc-tab="sms"]');
		const supplierLoginTab = document.querySelector('[data-osc-tab="supplier_login"]');

		if (tab === 'sms') {
			smsTab.classList.add('active');
			smsTab.style.fontWeight = 'bold';

			supplierLoginTab.classList.remove('active');

			document.getElementById('login-content').style.display = 'block';
			document.getElementById('login-content-supplier').style.display = 'none';
		} else {
			supplierLoginTab.classList.add('active');
			supplierLoginTab.style.fontWeight = 'bold';

			smsTab.classList.remove('active');

			document.getElementById('login-content').style.display = 'none';
			document.getElementById('login-content-supplier').style.display = 'block';
			
		}
	}

	document.addEventListener('DOMContentLoaded', function() {
		var showPasswordLink = document.getElementById('showPasswordLink');
		var passwordInput = document.getElementById('password');
		
		if (showPasswordLink && passwordInput) {
			showPasswordLink.addEventListener('click', function(e) {
				e.preventDefault(); 
				if (passwordInput.type === 'password') {
					passwordInput.type = 'text';
					showPasswordLink.textContent = '隐藏';
				} else {
					passwordInput.type = 'password'; 
					showPasswordLink.textContent = '显示';
				}
			});
		}
	});
	var getQRCodeButton = document.getElementById("btn_qr_code");
	getQRCodeButton.addEventListener("click", function() {
		location.reload();
	});

	window.onload = function() {
		switchTab('supplier_login');
	};

	document.getElementById('loginForm').addEventListener('submit', function(e) {
		e.preventDefault();
		
		var supplier_username = document.getElementById('username').value;
		var supplier_password = document.getElementById('password').value;
		var errorMessage = document.querySelector('.error-message');
		errorMessage.style.display = 'none';
		frappe.call({
			method: 'frappe_theme_rg.tools.login.supplier_login',
			dataType: 'json',
			args: { supplier_username: supplier_username, supplier_password: supplier_password},
			callback: function (data) {
				var code = data.message["code"]
				var url = data.message["home_page"]
				if (code == 200) {
					var currentUrl = window.location.href;
					var parser = document.createElement('a');
					parser.href = currentUrl;
					var hostname = parser.hostname;
					var port = parser.port;
					var newUrl = "http://" + hostname + ":" + port + "/app";
					window.location.href = newUrl;

				}else{
                    errorMessage.style.display = 'block';
				}
			}
		});
	});
	

</script>
{% endblock %}